<template>
  <div class="house">
    <div class="house-header">
      <div class="house-header-form">
        <el-select 
          v-model="headerForm.projectId" 
          placeholder="请选择项目"
          @change="headerSearch"
        >
            <el-option 
              v-for="item in projectOption" 
              :key="item.id" 
              :label="item.projectName" 
              :value="item.id"
            />
        </el-select>
        <el-select 
          v-model="headerForm.type" 
          placeholder="请选择" 
          @change="headerSearch"
        >
          <el-option label="水" :value="1" />
          <el-option label="电" :value="2" />
          <el-option label="气" :value="3" />
        </el-select>
      </div>
    </div>
    <div class="house-main">
      <CardList
        :data="dataList.list"
        @clickitem="toDetail"
      >
        <template #status="{ item }">
          <div 
            :class="`card-itemTopSignal ${item.status === 1 ? 'signalActive' : ''}`">
            <img :src="item.status === 1 ? signalActive : signal" alt=""> 
            {{ item.status === 1 ? "在线" : "离线" }}
          </div>
        </template>
        <template #content="{ item }">
          <li>
            <span :title="item.dailyUsage">{{ item.dailyUsage ?? '--' }}</span>
            <span :title="`今日用${typeName}(${typeUnit})`">今日用{{typeName}}({{ typeUnit }})</span>
          </li>
          <li>
            <span :title="item.totalUsage">{{ item.totalUsage ?? '--' }}</span>
            <span :title="`累计${typeName}量(${typeUnit})`">累计{{typeName}}量({{ typeUnit }})</span>
          </li>
        </template>
      </CardList>
      <!-- <el-row :gutter="20">
        <el-col 
          v-for="(item, index) in dataList.list" 
          :key="index" 
          :span="8"
          @click="toDetail(item)"
        >
          <div class="card-item pointer">
            <div class="card-itemTop">
              <div class="card-itemTopRoom">
                <img src="@/assets/images/room.png" alt="">
              </div>
              <div class="card-itemTopContent">
                <span :title="item.userName">{{ item.userName }}</span>
                <span :title="item.houseNum">房间号：{{ item.houseNum }}</span>
              </div>
              <div 
                :class="`card-itemTopSignal ${item.status == 1 ? 'signalActive' : ''}`">
                <img :src="item.status ? signalActive : signal" alt=""> 
                {{ item.status ? "在线" : "离线" }}
              </div>
            </div>
            <div class="card-itemBottom">
              <div>
                <span :title="item.dailyUsage">{{ item.dailyUsage ?? '--' }}</span>
                <span :title="`今日用${typeName}(${typeUnit})`">今日用{{typeName}}({{ typeUnit }})</span>
              </div>
              <div>
                <span :title="item.totalUsage">{{ item.totalUsage ?? '--' }}</span>
                <span :title="`累计${typeName}量(${typeUnit})`">累计{{typeName}}量({{ typeUnit }})</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router'
import signal from '@/assets/images/signal.png';
import signalActive from '@/assets/images/signalActive.png';
import CardList from '@/components/CardList/Index.vue'
import { getProjectList, getMonitorList } from '@/api/settle';

const router = useRouter()
const projectOption = ref([]) 

const dataList = reactive({
  list: [] as any
})
const typeName = computed(() => {
  if (headerForm.value.type == 1) {
    return '水'
  } else if (headerForm.value.type == 2) {
    return '电'
  } else if (headerForm.value.type == 3){
    return '气'
  }
})
const typeUnit = computed(() => {
  if (headerForm.value.type == 1) {
    return 't'
  } else if (headerForm.value.type == 2) {
    return 'kW·h'
  } else if (headerForm.value.type == 3){
    return 'm³'
  }
})

const headerForm = ref({
  projectId: null, 
  type: 2, 
})


const headerSearch = () => { 
  getMonitor()
}

const getMonitor = () => {
  getMonitorList(headerForm.value).then((res)=>{
    console.log('res', res)
    dataList.list = res.data
  })
  .catch((err)=> {
    console.error('err', err)
  })
}

const toDetail = (item) => {
  router.push({
    path: '/details',
    query: { projectId: item.projectId, houseId: item.houseId }
  })
}

getProjectList().then((res: any)=>{
  console.log('res', res.data)
  projectOption.value = res.data
})
.catch((err: any) => {
  console.error('err', err.msg)
})

getMonitor()

</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
.house {
  padding: 11px 16px;
  background: #F2FBF9;
  margin-top: -40px;
}

.house-header {
  z-index: 2;
  position: relative;
  float: right;
  margin-bottom: 16px;

  .house-header-form {
    display: flex;

    :deep(.el-select) {
      width: 160px;
      margin-left: 8px;
    }

  }
}

.house-main {
  width: 100%;
  align-content: flex-start;

  .cardActive {
    margin-right: 0px !important;
  }

  .card-item {
    // width: 23.3%;
    padding: 24px;
    // margin-right: 24px;
    margin-bottom: 21px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06);
    border-radius: 8px 8px 8px 8px;
    display: flex;
    flex-direction: column;

    .card-itemTop {
      flex: 1;
      display: flex;
      margin-bottom: 20px;

      .card-itemTopContent {
        flex: 1;
        color: #333333;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;

        span:nth-child(1) {
          font-weight: 400;
          font-size: 20px;
          margin-bottom: 6px;
          white-space: nowrap;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        span:nth-child(2) {
          font-weight: 400;
          font-size: 20px;
          white-space: nowrap;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .card-itemTopRoom {
        margin-right: 16px;
        width: 64px;
        height: 64px;
        background: #CCF5EC;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card-itemTopSignal {
        padding: 10px 16px;
        height: 32px;
        display: flex;
        align-items: center;
        background: #F7F9FB;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #C3C8CE;
        color: #838D9A;

        img {
          margin-right: 4px;
        }
      }

      .signalActive {
        border-color: #03CCA1 !important;
        background: rgba(3, 204, 161, 0.1) !important;
        color: #03CCA1;
      }
    }

    .card-itemBottom {
      display: flex;
      justify-content: space-between;

      div {
        overflow: hidden;
        display: flex;
        width: 48%;
        height: 100%;
        background: #F7F9FB;
        border-radius: 8px 8px 8px 8px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #333333;
        padding: 10px 0px;

        span:nth-child(1) {
          padding: 4px;
          width: 100%;
          font-size: 30px;
          font-weight: bold;
          white-space: nowrap;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: center;
        }

        span:nth-child(2) {
          margin-top: 2px;
          width: 100%;
          font-size: 16px;
          font-weight: 400;
          white-space: nowrap;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: center;
        }
      }
    }
  }
}

@media (max-width: 1560px) {
  .card-item {
    .card-itemTop {
      margin-bottom: 12px !important;

      .card-itemTopSignal {
        padding: 7px 10px !important;
        height: 28px !important;
      }

      .card-itemTopRoom {
        width: 48px !important;
        height: 48px !important;
      }

      .card-itemTopContent {
        span:nth-child(1) {
          font-size: 14px !important;
        }

        span:nth-child(2) {
          font-size: 14px !important;
        }
      }

      .card-itemTopSignal {
        font-size: 12px !important;
      }
    }

    .card-itemBottom {
      div {
        span:nth-child(1) {
          font-size: 20px !important;
        }

        span:nth-child(2) {
          font-size: 12px !important;
        }
      }
    }
  }
}
</style>